<template>
  <!-- 标签 -->
  <div class="tab">
    <van-tabs v-model="active" @click="changeTab">
      <van-tab v-for="(item,index) in comClassifyList" :key="index" :title="item.name"></van-tab>
    </van-tabs>
  </div>
</template>
<script>

export default {
  props:{
    classifyList:{
      type:Array,
      required:true,
      default:(()=>[])
    }
  },
  watch:{
    '$route.query'(){
      document.documentElement.scrollTop = 0
      this.active = +this.$route.query.activeTabIndex
      this.changeTab()
    }
  },
  data(){
    return {
      active: +this.$route.query.activeTabIndex || 0
    }
  },
  mounted() {
    console.log('this.$route.query.activeTabIndex:',this.$route.query.activeTabIndex);
    this.active = +this.$route.query.activeTabIndex
    if(this.active){
      this.changeTab()
    }
  },
  computed:{
    comClassifyList(){
      let globalClassifyList = [{id:0,name:'全部'}]
      return globalClassifyList.concat(this.classifyList)
    }
  },
  methods: {
    changeTab(){
      let classify = this.comClassifyList[this.active]
      // console.log('this.classify:',classify)
      this.$emit('changeTab',classify,this.active)
    },

  }
}
</script>

<style lang="sass" scoped>

</style>